<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('老师排班一览表')"/>

<body >

<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i>老师排班一览表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{'/teacher/class/schedule/info'}" onsubmit="return checkForm()">

                        <select id="teacherLevel" class="selectpicker" name="listLevel" multiple data-live-search="true" th:title="请选择老师级别" data-live-search-placeholder="搜索">
                            <!--<option value="">&#45;&#45;老师级别&#45;&#45;</option>-->
                            <option value="1" th:selected="${listLevel==null?false:#lists.contains(listLevel,1)}">白银老师</option>
                            <option value="2" th:selected="${listLevel==null?false:#lists.contains(listLevel,2)}">铂金老师</option>
                            <option value="3" th:selected="${listLevel==null?false:#lists.contains(listLevel,3)}">钻石老师</option>
                            <option value="4" th:selected="${listLevel==null?false:#lists.contains(listLevel,4)}">青铜老师</option>
                            <option value="5" th:selected="${listLevel==null?false:#lists.contains(listLevel,5)}">欧美老师</option>
                            <option value="6" th:selected="${listLevel==null?false:#lists.contains(listLevel,6)}">中教老师</option>
                        </select>
                        <input type="text" name="strClassDate" maxlength="10" th:value="${strClassDate}" id="strClassDate" class="form-control" onfocus="WdatePicker()">
                        <button class="btn btn-primary" type="submit"> 查 询 </button>

                    </form>
                    <table class="table table-striped table-bordered table-hover" style="margin-top: 10px;" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center" style="width: 200px;">老师</th>
                            <th class="text-center" style="width: 100px;">日期</th>
                            <th class="text-center" data-breakpoints="xs">班表时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${pageInfo.list}">
                            <td class="text-center" style="vertical-align: middle;" th:text="${itemStat.index+1}"></td>
                            <td class="text-center" style="white-space:nowrap;vertical-align: middle;">
                                <a href="javascript:" th:onclick="|teacherInfo(${item.teacherId})|" th:text="${item.teacherLogin}"></a>
                            </td>
                            <td class="text-center" style="vertical-align: middle;" th:text="${#dates.format(item.classDate,'yyyy-MM-dd')}"></td>
                            <td th:with="listClass=${#strings.listSplit(item.classInfo,',')}">
                                <span th:each="classItem:${listClass}">
                                    <span th:with="classInfo=${#strings.arraySplit(classItem,'|')}">
                                        <button type="button" class="btn btn-success" style="margin-bottom: 5px;" th:if="${classInfo[1]=='0'}" th:title="${'操作人：'+classInfo[2]+'&#10;操作时间：'+classInfo[3]}" th:text="${classInfo[0]}"></button>
                                        <button type="button" class="btn btn-danger" style="margin-bottom: 5px;" th:onclick="personInfo([[${classInfo[4]}]])" th:if="${classInfo[1]=='1' || classInfo[1]=='2' || classInfo[1]=='3' || classInfo[1]=='4'}" th:title="${'操作人：'+classInfo[2]+'&#10;操作时间：'+classInfo[3]}" th:text="${classInfo[0]}"></button>
                                        <button type="button" class="btn btn-primary" style="margin-bottom: 5px;" th:if="${classInfo[1]=='5'}" th:title="${'操作人：'+classInfo[2]+'&#10;操作时间：'+classInfo[3]}" th:text="${classInfo[0]}"></button>
                                        <button type="button" class="btn btn-default" style="margin-bottom: 5px;" th:unless="${classInfo[1]=='0' || classInfo[1]=='1' || classInfo[1]=='2' || classInfo[1]=='3' || classInfo[1]=='4' || classInfo[1]=='5'}" th:title="${'操作人：'+classInfo[2]+'&#10;操作时间：'+classInfo[3]}" th:text="${classInfo[0]}"></button>
                                    </span>
                                </span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="../../static/js/openPerson.js" th:src="@{'/static/js/openPerson.js'}" ></script>
    <script>
        function teacherInfo(teacherId){
            let url = "/personCtl/teacher/info/"+teacherId+"/0";
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0.5],
                area: ['80%', '90%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
            });
        }

        function checkForm() {
            if ($.trim($("#strClassDate").val())===''){
                layer.tips('请选择查询日期','#strClassDate',{tips: [3, '#3595cc']});
                return false;
            }
        }
    </script>

</body>
</html>